<template>
    <div>
        <div style="text-align: center; font-size: xx-large; margin-bottom: 20px">轮播图展示效果</div>

        <el-carousel :interval="5000" type="card" height="200px" >
            <el-carousel-item v-for="item in swiperList" >
                <img :src="item.imgURL" height="200px" width="500px"/>
            </el-carousel-item>
        </el-carousel>

        <div>
            <div style="width: 40%; margin-left: 120px">点击下方添加轮播图</div>
            <el-upload
                    class="avatar-uploader"
                    action="http://localhost:8080/jz/swiper/insert"
                    :show-file-list="true"
                    :disabled="disabled"
                    :on-success="handleAvatarSuccess"
                    style="width: 30%; float: left"
            >
                <i  class="el-icon-plus avatar-uploader-icon" style="padding-left: 100px" @click="isFive"></i>
                <div slot="tip" class="el-upload__tip" style="margin-left: 90px">只能上传jpg/png/jpeg文件，且不超过5张</div>
            </el-upload>
            <el-table
                    :data="swiperList"
                    style="width: 60%; float: right; "
                    :cell-style="cellStyle"
            >
                <el-table-column
                        label="图片名称"
                        width="180"
                        class=".el-table__cell"
                        align="left">
                    <template slot-scope="scope" >
                            <div slot="reference" class="name-wrapper" >
                                <el-tag size="medium">{{ scope.row.name }}</el-tag>
                            </div>
                    </template>
                </el-table-column>
                <el-table-column
                        label="图片"
                        width="180">
                    <template slot-scope="scope">
                        <div slot="reference" class="name-wrapper">
                            <img :src="scope.row.imgURL" height="28px" width="28px" style="padding: 2px"/>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column
                        label="上传日期"
                        width="190">
                    <template slot-scope="scope">
                        <i class="el-icon-time"></i>
                        <span style="margin-left: 10px">{{ scope.row.uploadDate }}</span>
                    </template>
                </el-table-column>

                <el-table-column label="操作" >
                    <template slot-scope="scope">
                        <el-button
                                size="mini"
                                type="danger"
                                @click="handleDelete( scope.row.name)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>

    </div>
</template>

<script>
    export default {
        name: "swiper",
        data(){
            return{
                swiperList:[],
                disabled: false
            }
        },
        created() {
            var that=this;
            this.$ajax.post('/jz/swiper/getSwiper').then(function (resp) {
                console.log(resp.data.swiperList);
                that.swiperList=resp.data.swiperList
            })
        },

        methods: {
            handleDelete(name) {
                console.log(name);
                var that=this;
                this.$ajax.post('/jz/swiper/deleteSwiper?name='+name).then(function (resp) {
                    console.log(resp.data);
                    if(resp.data.status==200){
                        that.$message({
                            type: "success",
                            message: resp.data.msg+',请刷新'
                        })
                        window.onload();
                    }
                })
            },

            cellStyle ({row, column, rowIndex, columnIndex}) {
                return 'padding:5px 0;'
            },

            handleAvatarSuccess(res, file) {
                    this.imageUrl = URL.createObjectURL(file.raw);
                    this.$message({
                        type: "success",
                        message: "上传成功，请刷新！"
                    })
            },
            isFive(){
                console.log("xxxxxx")
                if(this.swiperList.length>=5){
                    this.$message({
                        type: "warning",
                        message:"最多只能上传5张图片"
                    })
                    this.disabled=true
                }
            }
        }
    }
</script>

<style scoped>
    .el-carousel__item {
        color: #475669;
        font-size: 14px;
        opacity: 0.75;
        line-height: 100px;
        margin: 0;
    }
    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }
    .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }
    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        line-height: 178px;
        text-align: center;
    }
    .avatar {
        width: 178px;
        height: 178px;
        display: block;
    }

</style>
